import React from "react";
import "../../assets/style/role/roleList.css";
import { Card, Form, Row, Col, Input, Select, Button, Table, Space, Modal, Radio, TreeSelect, Breadcrumb } from 'antd';

const { Option } = Select;
const { TreeNode } = TreeSelect;
const data = [
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    firstName: 'Jim',
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    firstName: 'Joe',
    lastName: 'Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default class roleList extends React.Component {
  onGenderChange = (value) => {
    this.formRef.current.setFieldsValue({
      note: `Hi, ${value === 'male' ? '启用' : '禁用'}!`,
    });
  };
  //弹出框
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  state = {
    visible: false,
    StateValue: 1,//状态
    roleValue: undefined,//资源
  };
  //修改角色--状态单选事件
  onStateChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      StateValue: e.target.value
    })
  }
  //修改角色--资源选择事件
  onRoleChange = roleVlue => {
    console.log(roleVlue);
    this.setState({ roleVlue })
  }
  render() {
    const { value } = this.state;
    return (
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>权限管理</Breadcrumb.Item>
          <Breadcrumb.Item>角色管理</Breadcrumb.Item>
        </Breadcrumb>
        <Card bordered={false} >
          <h1 className={"roleSearchN"}>角色筛选</h1>
          <Form className={"roleFormSearch"}>
            <Row className={"roleSearchBox"} span={24}>
              <Col span={6}>
                <Form.Item name="roleName" label="角色名称">
                  <Input placeholder="" style={{ width: 200 }} />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item name="roleState" label="状态">
                  <Select
                    style={{ width: 200 }}
                    placeholder="请选择状态"
                    onChange={this.onGenderChange}
                    allowClear
                  >
                    <Option value="male">启用</Option>
                    <Option value="female">禁用</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Col span={10}>
              <Form.Item className={"roleSearchBtn"}>
                <Button className={"roleSearch"} htmlType="submit" type="primary">查 询</Button>
                <Button className={"roleDel"} type="primary">重 置</Button>
              </Form.Item>
            </Col>
          </Form>
        </Card>
        <Card className={"roleList"}>
          <Form className={"roleForm"}>
            <h1>角色列表</h1>
            <Button type="primary" className={"roleBtn"} onClick={this.showModal}>新增角色</Button>
            {/*    角色列表*/}
          </Form>
          <Table dataSource={data} bordered>
            <Table.Column title="序号" dataIndex="firstName" key="firstName" />
            <Table.Column title="账号" dataIndex="lastName" key="lastName" />
            <Table.Column title="邮箱" dataIndex="age" key="age" />
            <Table.Column title="address" dataIndex="address" key="address" />
            <Table.Column title="address" dataIndex="address" key="address" />
            <Table.Column title="address" dataIndex="address" key="address" />
            <Table.Column
              title="Action"
              key="action"
              render={(text, record) => (
                <Space size="middle">
                  <Button type="primary">修改</Button>
                </Space>
              )}
            />
          </Table>
          <Modal
            title="角色修改"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          >
            <Form>
              <Form.Item name="roleName" label="角色名称">
                <Input placeholder="" style={{ width: 200 }} />
              </Form.Item>
              <Form.Item name="roleDesc" label="角色描述">
                <Input placeholder="" style={{ width: 200 }} />
              </Form.Item>
              <Form.Item name="roleState" label="状态">
                <Radio.Group onChange={this.onStateChange} value={value}>
                  <Radio value={1}>启用</Radio>
                  <Radio value={2}>禁用</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name="menuName" label="资源">
                <TreeSelect
                  showSearch
                  style={{ width: '200px' }}
                  value={this.state.value}
                  dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
                  placeholder="请选择"
                  allowClear
                  treeDefaultExpandAll
                  onChange={this.onRoleChange}
                >
                  <TreeNode value="parent 1" title="商品管理">
                    商品管理
                                   </TreeNode>
                  <TreeNode value="parent 2" title="订单管理">
                    订单管理
                                   </TreeNode>
                  <TreeNode value="parent 3" title="优惠券管理">
                    优惠券管理
                                   </TreeNode>
                  <TreeNode value="parent 4" title="权限管理">
                    权限管理
                                   </TreeNode>
                </TreeSelect>
              </Form.Item>
            </Form>
          </Modal>
        </Card>
      </div>
    )
  }
}
